<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>17.3.BOM-定时器-setInterval() -练习（重点案例）：倒计时</title>
    <style>
        div {
            margin: 200px;
        }

        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>
<!-- 倒计时 -->
<!-- 1.这个事件是不断变化的，因此需要定时器来自动变化（setInterval） -->
<!-- 2.三个盒子，分别存放时、分、秒 -->
<!-- 三个盒子利用innerHTML放入计算的 时、分、秒 的数-->
<!-- 第一次执行也有间隔毫秒数，因此刷新页面时候会有一会空白 -->
<!-- 最好采用封装函数的方式，这样可以先调用一次这个函数，防止开始刷新页面时候空白问题 -->

<body>
    <div>
        <span class="hour"></span>
        <span class="minute"></span>
        <span class="second"></span>
    </div>
</body>

<script>
    window.addEventListener('load', function () {
        var hour = document.querySelector('.hour');                      // 获取小时的黑色盒子
        var minute = document.querySelector('.minute');                  // 获取分钟的黑色盒子
        var second = document.querySelector('.second');                  // 获取秒的黑色盒子
        var inputTime = +new Date('2021-10-1 00:00:00');                 // 获取返回的是用户输入时间总的毫秒数
        countDown();                                                     // 先调用一次这个函数，防止第一次刷新页面有空白
        setInterval(countDown, 1000);                                    // 开启定时器
        function countDown() {                                           // 倒计时函数获取
            var nowTime = +new Date();                                   // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000;                    // times 就是剩余时间总的毫秒数  除以1000 就是秒 1s=1000ms
            var hours = parseInt(times / 60 / 60 % 24);                  // 换算小时
            hours = hours < 10 ? '0' + hours : hours;                    // 小时补0操作
            hour.innerHTML = hours;                                      // 给小时的盒子赋值
            var minutes = parseInt(times / 60 % 60);                     // 换算分钟
            minutes = minutes < 10 ? '0' + minutes : minutes;            // 分钟补0操作
            minute.innerHTML = minutes;                                  // 给分钟的盒子赋值
            var seconds = parseInt(times % 60);                          // 换算秒
            seconds = seconds < 10 ? '0' + seconds : seconds;            // 秒补0操作
            second.innerHTML = seconds;                                  // 给秒的盒子赋值
        }
    })
</script>

</html>